import { ref } from 'vue'

/**
 * 数据获取组合式函数
 * 处理异步数据获取的状态和逻辑
 * @param url 要获取数据的URL
 * @returns 数据获取相关的状态和方法
 */
export function useFetch<T>(url: string) {
  // 存储获取到的数据
  const data = ref<T | null>(null)
  // 存储可能发生的错误
  const error = ref<Error | null>(null)
  // 加载状态标志
  const loading = ref(false)
  
  /**
   * 执行数据获取的方法
   * 更新 loading、error 和 data 状态
   */
  const fetchData = async () => {
    // 开始加载，重置错误状态
    loading.value = true
    error.value = null
    
    try {
      // 发起请求并解析响应
      const response = await fetch(url)
      data.value = await response.json()
    } catch (e) {
      // 捕获并存储错误
      error.value = e as Error
    } finally {
      // 完成后设置加载状态
      loading.value = false
    }
  }
  
  // 返回所有相关状态和方法
  return {
    data,      // 获取到的数据
    error,     // 错误信息
    loading,   // 加载状态
    fetchData  // 获取数据的方法
  }
} 